<template>
  <div class="container">
    <el-row>
      <el-col :span="6">
        <el-upload
          class="upload-demo"
          :action="baseURL + uploadUrl"
          :show-file-list="false"
          multiple
          :on-success="handleAvatarSuccess"
          :limit="3"
          :headers="headers"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
import uploadimg from "@/components/uploadimg/uploadimg";
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      uploadUrl: "common/uploadfile",
      formData: {},
      imageUrl: "",
      headers: {token:getToken()},
    };
  },
  components: {
    uploadimg,
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.imageUrl =res.data.url;

      this.$alert(this.imageUrl, "信息", {
        confirmButtonText: "复制",
        dangerouslyUseHTMLString:true,
        customClass:'message_box_alert',
        callback: (action) => {
          let oInput = document.createElement("input");
          oInput.value = this.imageUrl;
          document.body.appendChild(oInput);
          oInput.select(); // 选择对象;
          document.execCommand("Copy"); // 执行浏览器复制命令
          this.$message({
            message: "复制成功",
            type: "success",
          });
          oInput.remove();
        },
      });
    },
  },
};
</script>

<style lang="scss">
/**站内信长单词强制换行 */
  .message_box_alert {
      word-break: break-all !important;
  }
</style>
